<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="../../../static/css/pet_prodeuce/pet_produce.css"
          th:href="@{../css/pet_prodeuce/pet_produce.css}"/>
    <link href="../../../static/css/style.css" th:href="@{../css/style.css}" rel="stylesheet" type="text/css"/>
    <style>
        a {
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="header">
    <a href="#" id="logo"><img src="../images/logo.gif" width="310" height="114" alt="" title=""/></a>
    <ul class="navigation">
        <li><a href="/petIndex/">返回首页</a></li>
        <li class="active"><a href="/petMart/jumpToPetMart">宠物商店</a></li>
        <li><a href="/blog/">博客</a></li>
        <li><a href="blog.html">关于我们</a></li>
        <li><a href="petguide.html">向导</a></li>
        <li><a href="contact.html">后台登录</a></li>
    </ul>
</div>


<div id="J_proHeader">
    <div class="xm-product-box">
        <div class="nav-bar" id="J_headNav">
            <div class="container J_navSwitch">
                <div class="con">
                    <div class="right">

                        <div style="float: left" id="J_miniCartTrigger">
                            <a id="J_miniCartBtn"><i class="iconfont"></i>购物车<span
                                    class="cart-mini-num J_cartNum" th:text="'（'+${number}+'）'"></span>
                            </a>
                        </div>

                        <span class="separator">|</span>
                        <a>用户评价</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="xm-buyBox" id="J_buyBox">
    <div class="box clearfix">
        <div class="pro-choose-main container clearfix">
            <div class="pro-view span10">
                <!-- 左侧轮播图 -->
                <div id="J_img" class="img-con" style="left: 62px; margin-top: 1px;">

                    <div class="ui-wrapper" style="max-width: 100%;">
                        <div class="ui-viewport"
                             style="width: 100%; overflow: hidden; position: relative; height: 560px;">
                            <div id="J_sliderView" class="sliderWrap" style="width: auto; position: relative;"><img
                                    class="slider done" id="one"
                                    th:src="@{${produce.image}}"
                                    style="float: none; list-style: none; position: absolute; width: 560px; z-index: 0; display: block;"/><img
                                    class="slider done" id="two"
                                    th:src="@{${produce.image1}}"
                                    style="float: none; list-style: none; position: absolute; width: 560px; z-index: 0; display: none;"/><img
                                    class="slider done" id="three"
                                    th:src="@{${produce.image2}}"
                                    style="float: none; list-style: none; position: absolute; width: 560px; z-index: 0; display: none; "/>
                            </div>
                        </div>

                        <div>
                            <div class="ui-pager ui-default-pager">
                                <div class="ui-pager-item"><a href="">1</a>
                                </div>
                                <div class="ui-pager-item"><a href="">2</a>
                                </div>
                                <div class="ui-pager-item"><a href="">3</a>
                                </div>
                            </div>

                            <div class="ui-controls-direction">
                                <a class="ui-prev">上一张</a>
                                <a class="ui-next">下一张</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="pro-info span10">
                <h1 class="pro-title J_proName">
                    <span class="img"></span>
                    <span class="name" th:text="${produce.proName}"></span>
                </h1>

                <!-- 主体 -->
                <div class="J_main">
                    <!-- 经营主题 -->
                    <p class="aftersale-company" id="J_aftersaleCompany" type="1" desc="null">滚滚宠物专卖 （包装变更，随机发货）</p>
                    <!-- 价格 -->
                    <div class="pro-price J_proPrice">
                        <span class="price" th:text="'单价：'+${produce.price}+'0元'"></span>
                    </div>

                    <div class="J_saleWrap sale-wrap">
                        <!--  present(赠品) -->
                        <div class="J_flowWrap flow-wrap">
                            <ul>
                                <li><span class="flow-tag">赠品</span> <span class="flow-name"
                                                                           th:text="${produce.present}"></span></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 分仓地址 -->
                    <div class="J_addressWrap address-wrap">
                        <div class="user-default-address" id="J_userDefaultAddress"><i
                                class="iconfont iconfont-location"></i>
                            <div>
                                <div class="address-info">
                                    <span class="item" id="ipAddress"></span>
                                </div>
                                <span class="switch-choose-regions" id="J_switchChooseRegions"> 修改 </span>
                            </div>
                            <div class="product-status active">
                                <span class="sale" th:text="'（有现货）剩余：'+${produce.count}"
                                      th:if="${produce.count gt 0}"></span>
                                <span class="sale" th:text="该地区暂时缺货" th:if="${produce.count lt 0}"></span>
                            </div>
                        </div>
                    </div>
                    <!-- 产品版本 -->
                    <div class="list-wrap" id="J_list">
                        <div class="pro-choose pro-choose-col2 J_step" data-index="0">
                            <div class="step-title" data-name="选择颜色"> 选择颜色</div>
                            <ul class="step-list clearfix">
                                <li class="btn btn-biglarge active" data-id="2173700018" data-cid="1173700008"
                                    data-name="米动手表青春版 曜石黑" data-price="399元" data-value="曜石黑" data-index="0"><a
                                        href="javascript:void(0);"> <img
                                        src="https://i8.mifile.cn/v1/a1/9286b9a5-4055-9bea-e094-3cfb9ebf56ff.jpg"
                                        data-src="//i8.mifile.cn/v1/a1/9286b9a5-4055-9bea-e094-3cfb9ebf56ff.jpg"
                                        alt="曜石黑" class="done"/> 曜石黑 </a></li>
                                <li class="btn btn-biglarge disabled" data-id="2173700019" data-cid="1173700009"
                                    data-name="米动手表青春版 火焰橙" data-price="399元" data-value="火焰橙" data-index="1"><a
                                        href="javascript:void(0);"> <img
                                        src="https://i8.mifile.cn/v1/a1/9b0cccbd-6e25-8c50-5105-179d4b21d60d.jpg"
                                        data-src="//i8.mifile.cn/v1/a1/9b0cccbd-6e25-8c50-5105-179d4b21d60d.jpg"
                                        alt="火焰橙" class="done"/> 火焰橙 </a></li>
                            </ul>
                        </div>
                    </div>

                    <div id="J_relation"></div>

                    <div class="pro-list" id="J_proList">
                        <ul>
                            <li class="totlePrice"><span th:text="${produce.proName}" style="float: none"></span> <span
                                    th:text="${produce.price}+'0元'"></span></li>
                        </ul>
                    </div>
                    <!-- 购买按钮 -->

                    <ul class="btn-wrap clearfix" id="J_buyBtnBox">
                        <li><a href="/petMart/jumpToShopCar" class="btn btn-primary btn-biglarge J_proBuyBtn"
                               data-type="common" data-name="加入购物车" id="shopCar">加入购物车</a></li>
                        <li><a href="//order.mi.com/site/login?redirectUrl=https://item.mi.com/product/6820.html"
                               class="btn-gray btn-like btn-biglarge"> <i class="iconfont default"></i>喜欢 </a></li>
                    </ul>


                    <div class="pro-policy" id="J_policy"><a href="javascript:void(0);" title=""> <span class="support">  <i
                            class="iconfont"></i>  <em>小米自营</em> </span> </a> <a href="javascript:void(0);"
                                                                                  title="由小米发货"> <span class="support">  <i
                            class="iconfont"></i>  <em>小米发货</em> </span> </a> <a href="javascript:void(0);" title="">
                        <span class="support">  <i class="iconfont"></i>  <em>7天无理由退货</em> </span> </a> <a
                            href="javascript:void(0);" title="由小米发货的商品，单笔满150元免运费;
由第三方商家发货的商品，免运费;
特殊商品需要单独收取运费，具体以实际结算金额为准；优惠券等不能抵扣运费金额;"> <span class="support">  <i class="iconfont"></i>  <em>运费说明</em> </span> </a>
                    </div>
                </div>
                <!-- 获取商品失败 -->
            </div>
        </div>
    </div>
</div>

<div class="site-info">
    <div class="container">
        <div class="logo ir">小米官网</div>
        <div class="info-text">
            <p class="sites"><a rel="nofollow" href="//www.mi.com/index.html" target="_blank"
                                data-stat-id="4bc9b84ee8285a77"
                                onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-4bc9b84ee8285a77', '//www.mi.com/index.html', 'pcpid', '']);">小米商城</a><span
                    class="sep">|</span><a rel="nofollow" href="https://www.miui.com/" target="_blank"
                                           data-stat-id="d1077e912318a8aa"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-d1077e912318a8aa', 'https://www.miui.com/', 'pcpid', '']);">MIUI</a><span
                    class="sep">|</span><a rel="nofollow" href="https://home.mi.com/index.html" target="_blank"
                                           data-stat-id="bf8fb9978f16ecd7"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-bf8fb9978f16ecd7', 'https://home.mi.com/index.html', 'pcpid', '']);">米家</a><span
                    class="sep">|</span><a rel="nofollow" href="http://www.miliao.com/" target="_blank"
                                           data-stat-id="8fa92518f4f4139b"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-8fa92518f4f4139b', 'http://www.miliao.com/', 'pcpid', '']);">米聊</a><span
                    class="sep">|</span><a rel="nofollow" href="https://www.duokan.com/" target="_blank"
                                           data-stat-id="d0e7b344070ce805"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-d0e7b344070ce805', 'https://www.duokan.com/', 'pcpid', '']);">多看</a><span
                    class="sep">|</span><a rel="nofollow" href="http://game.xiaomi.com/" target="_blank"
                                           data-stat-id="d14f6094510ae91d"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-d14f6094510ae91d', 'http://game.xiaomi.com/', 'pcpid', '']);">游戏</a><span
                    class="sep">|</span><a rel="nofollow" href="http://www.miwifi.com/" target="_blank"
                                           data-stat-id="89c8a04b65d5a2cc"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-89c8a04b65d5a2cc', 'http://www.miwifi.com/', 'pcpid', '']);">路由器</a><span
                    class="sep">|</span><a rel="nofollow" href="//www.mi.com/micard/" target="_blank"
                                           data-stat-id="8383fc54e821723e"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-8383fc54e821723e', '//www.mi.com/micard/', 'pcpid', '']);">米粉卡</a><span
                    class="sep">|</span><a rel="nofollow"
                                           href="https://b.mi.com/?client_id=180100031058&amp;masid=17409.0358"
                                           target="_blank" data-stat-id="d4e20cb7bc05f0ca"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-d4e20cb7bc05f0ca', 'https://b.mi.com/client_id=180100031058&amp;masid=17409.0358', 'pcpid', '']);">政企服务</a><span
                    class="sep">|</span><a rel="nofollow" href="https://xiaomi.tmall.com/" target="_blank"
                                           data-stat-id="6e21be38e4356064"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-6e21be38e4356064', 'https://xiaomi.tmall.com/', 'pcpid', '']);">小米天猫店</a><span
                    class="sep">|</span><a rel="nofollow" href="https://www.mi.com/about/privacy/" target="_blank"
                                           data-stat-id="90be4ced6fda635c"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-90be4ced6fda635c', 'https://www.mi.com/about/privacy/', 'pcpid', '']);">隐私政策</a><span
                    class="sep">|</span><a rel="nofollow" href="https://static.mi.com/feedback/" target="_blank"
                                           data-stat-id="de622113e8f771bc"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-de622113e8f771bc', 'https://static.mi.com/feedback/', 'pcpid', '']);">问题反馈</a><span
                    class="sep">|</span><a rel="nofollow" href="//www.mi.com/jiancha/" target="_blank"
                                           data-stat-id="f5ca8a00d46ba8a6"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-f5ca8a00d46ba8a6', '//www.mi.com/jiancha/', 'pcpid', '']);">廉正举报</a><span
                    class="sep">|</span><a rel="nofollow" href="https://integrity.mi.com/" target="_blank"
                                           data-stat-id="73b66047a8941cf8"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-73b66047a8941cf8', 'https://integrity.mi.com/', 'pcpid', '']);">诚信合规</a><span
                    class="sep">|</span><a rel="nofollow" href="#J_modal-globalSites" data-toggle="modal"
                                           data-stat-id="372d1fe9f6763b90"
                                           onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-372d1fe9f6763b90', '#J_modal-globalSites', 'pcpid', '']);">Select
                Region</a></p>
            <p>©
                <a href=" " target="_blank" title="mi.com" data-stat-id="bdfd116c84984884"
                   onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-bdfd116c84984884', '', 'pcpid', '']);">mi.com</a>
                京ICP证110507号
                <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow" data-stat-id="9782c50fb4ba0561"
                   onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-9782c50fb4ba0561', 'http://www.miitbeian.gov.cn/', 'pcpid', '']);">京ICP备10046444号</a>
                <a rel="nofollow" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
                   target="_blank" data-stat-id="e9d2688beb41458a"
                   onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-e9d2688beb41458a', 'http://www.beian.gov.cn/portal/registerSystemInforecordcode=11010802020134', 'pcpid', '']);">京公网安备11010802020134号 </a>
                <a href="//www.mi.com/culture-license/" target="_blank" data-stat-id="059ce48ed7ed6a36"
                   onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-059ce48ed7ed6a36', '//www.mi.com/culture-license/', 'pcpid', '']);">京网文[2017]1530-131号</a>
                <br/>
                <a href="//www.mi.com/medical/record/" target="_blank" data-stat-id="97cdd5ee52424ea3"
                   onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-97cdd5ee52424ea3', '//www.mi.com/medical/record/', 'pcpid', '']);">（京）网械平台备字（2018）第00005号
                </a>
                <a href="//www.mi.com/medical/qualification/" target="_blank" data-stat-id="f4696bf96a52cdae"
                   onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-f4696bf96a52cdae', '//www.mi.com/medical/qualification/', 'pcpid', '']);">互联网药品信息服务资格证
                    (京) -非经营性-2014-0090
                </a>
                <a href="//www.mi.com/business-license/" target="_blank" data-stat-id="3ed1ade2d90f5e8a"
                   onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-3ed1ade2d90f5e8a', '//www.mi.com/business-license/', 'pcpid', '']);">营业执照</a>
                <a href="//www.mi.com/medical/list/" target="_blank" data-stat-id="5186b38734e64ad1"
                   onclick="_msq.push(['trackEvent', 'f6d3598ad2cf004a-5186b38734e64ad1', '//www.mi.com/medical/list/', 'pcpid', '']);">医疗器械公告</a>
                <br/>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        </div>

    </div>

</div>


</body>
<script type="text/javascript" src="../../../static/js/jquery-3.3.1.min.js"
        th:src="@{../js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" src="../../../static/js/pet_produce/pet_produce.js"
        th:src="@{../js/pet_produce/pet_produce.js}"></script>
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
</html>